<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span>请输入您要猜的数字：</span><br>
        <input type="text" id="text">
        <input type="button" value="猜" id = "guess"><br>
        <span>已经猜的次数：</span>
        <span id = "count">0</span><br>
        结果:<span class="c1"></span><br>

        <input type="button" value="重新开始游戏" id = "re"><br>
    </div>
    <script>
        var text = document.querySelector("#text");//获取输入元素
        var count = document.querySelector("#count");//获取次数元素
        var result = document.querySelector(".c1");//获取结果元素
        var guessBu = document.querySelector("#guess");//获取“猜”按钮元素
        var reBu = document.querySelector("#re");//获取“重新开始”按钮元素
        var guessNumber = Math.floor(Math.random()*100)+1;//生成随机数
        var sum = 0;//猜的总次数
        guessBu.onclick = function(){ //给“猜”按钮绑定点击功能
            sum++;
            count.innerHTML = sum;
            var userGuess = parseInt(text.value);//获取输入的数字
            if(userGuess > guessNumber){ //如果输入大于系统生成数字
                result.innerHTML = "很遗憾，您猜大了！";
                result.style.color = "red"; //调正颜色为红色
            }else if(userGuess < guessNumber){//如果输入小于系统生成数字
                result.innerHTML = "很遗憾，您猜小了！";
                result.style.color = "red";
            }else { //输入等于系统生成数字
                result.className = "c2";
                result.innerHTML = "恭喜您，您猜对了！";
                result.style.color = "green";//调整颜色为绿色
            }
        }
        reBu.onclick = function(){//给“重新开始”按钮绑定点击事件
            guessNumber = Math.floor(Math.random()*100)+1;//重新生成随机数
            sum = 0;//猜的总次数置0
            count.innerHTML = sum;//将0填充
            result.innerHTML = "";//结果置空
            text.value = "";//输入框置空
        }
    </script>
</body>
</html>